<template>
    <!--手动发送-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.sendManually')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="applyTime" label=""><!--时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.registerTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.startTime')"
                                    :end-placeholder="$t('common.endTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="sendProvider"><!--发送渠道-->
                            <el-select v-model="form.sendProvider" :placeholder="$t('common.sendChannel')" clearable style="width:100%;">
                                <!-- <el-option v-for="(type,index) in messageTypeData" :key="index" :value="type" :label="type"></el-option> -->
                                <el-option :key="0" value="NX_CLOUD" label="NX_CLOUD"></el-option>
                                <el-option :key="1" value="ITEXMO" label="ITEXMO"></el-option>
                                <el-option :key="2" v-if='domain=="Candy"||domain=="Pesopop"||domain=="CatCash"' value="PAASOO" label="PAASOO"></el-option>
                                <el-option :key="2" v-if='domain=="Candy"||domain=="Pesopop"||domain=="CatCash"' value="CM" label="CM"></el-option>
                                <el-option :key="3" value="HIWAY" label="HIWAY"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="operator" label="">
                            <el-input v-model="form.operator" :placeholder="$t('common.operator')" clearable></el-input><!--操作员-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="sendSMS" type="primary">{{ $t('common.sendSMS') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" :max-height="tableMaxHeight" tooltip-effect="light" style="width: 100%">
                        <el-table-column align="left" :label="$t('collection.sendTime')"><!--发送时间-->
                            <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column align="left" prop="sendProvider" :label="$t('common.sendChannel')"></el-table-column><!--发送渠道-->
                        <el-table-column align="left" :label="$t('common.SMSContent')" prop="content" :show-overflow-tooltip="true" min-width="180"></el-table-column><!--短信内容-->
                        <el-table-column align="left" prop="sendCount" :label="$t('common.sendAmount')"></el-table-column><!--发送数-->
                        <el-table-column align="left" prop="successCount" :label="$t('common.successAmount')"></el-table-column><!--成功数-->
                        <el-table-column align="left" prop="failCount" :label="$t('common.failAmount')"><!--失败数-->
                            <template slot-scope="scope">
                                <span>{{scope.row.failCount}} <i v-if="scope.row.failCount > 0" class="el-icon-download" @click="downloadFail(scope.row)"></i></span>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.remark')" prop="remarks" :show-overflow-tooltip="true" min-width="120"></el-table-column><!--备注-->
                        <el-table-column align="left" prop="operator" :label="$t('common.operator')"></el-table-column><!--操作员-->
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
            </div>
        </div>
        <!--短信发送-->
        <el-dialog
                :title="$t('common.sendSMS')"
                :visible.sync="sendDialog.isVisible"
                width="600px"
                class="configDialogForm">
            <div>
                <el-form ref="sendDialog.form" :model="sendDialog.form" :rules="sendDialog.rules" :inline="false" :label-width="formLabelWidth">
                    <div class="box">
                        <div class="box-sort">
                            <el-form-item prop="importUsers" :label="$t('common.importFile')+ ' :'">
                                <el-upload
                                        ref="upload"
                                        :headers="uploadHeader"
                                        :show-file-list="false"
                                        name="file"
                                        :before-upload="beforeUpload"
                                        :on-success="uploadSuccess"
                                        :on-error="closeLoading"
                                        :disabled="uploadLoading"
                                        :action="uploadUrl">
                                    <el-button :disabled="uploadLoading" :loading="uploadLoading" slot="trigger" size="small" type="primary">{{$t('common.chooseFile')}}</el-button><el-button @click="downloadTemplateExcel" size="small" style="margin-left:10px;">{{$t('common.downloadTemplate')}}</el-button>
                                </el-upload>
                                <div v-if="sendDialog.form.importUsers">{{ uploadLoadName }}</div>
                                <div v-else>{{$t('common.notChooseFile')}}</div>
                            </el-form-item>
                            <el-form-item prop="messageType" :label="$t('common.sendChannel')+ ' :'">
                                <el-select v-model="sendDialog.form.messageType" :placeholder="$t('common.sendChannel')" clearable style="width:100%;">
                                     <el-option v-for="(type,index) in messageTypeData" :key="index" :value="type" :label="type"></el-option>
<!--                                    <el-option :key="0" value="NX_CLOUD" label="NX_CLOUD"></el-option>-->
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="msgContent" :label="$t('common.SMSContent') + ' :'">
                                <el-input v-model="sendDialog.form.msgContent" type="textarea" maxlength="500" :rows="3" :placeholder="$t('verify.underXWords',{x: '500'})" style="width: 100%"></el-input>
                                <div style="color:red;">{{$t('common.smsContentRule',{x: smsWordCount, y: smsNumber})}}</div>
                            </el-form-item>
                            <el-form-item prop="note" :label="$t('common.remark') + ' :'">
                                <el-input v-model="sendDialog.form.note" type="textarea" maxlength="200" :rows="3" :placeholder="$t('verify.underXWords',{x: '200'})" style="width: 100%"></el-input>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
                <p style="color:red;">{{$t('common.smsTemplateImportRule',{x: '10000'})}}</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sendConfirm">{{$t('common.confirm')}}</el-button>
                <el-button @click="sendDialog.isVisible = false">{{$t('common.cancel')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss">
    [data-page=operation-smsManage-sendManually] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
        .el-icon-download {
            font-size: 16px;
            font-weight: 800;
            color: #47c5b2;
            margin-left: 10px;
            cursor: pointer;
        }
    }
</style>
